<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户评价与投诉</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #eaf7e4; /* 浅绿色背景 */
            color: #333; /* 深灰色文字 */
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4caf50; /* 深绿色头部背景 */
            color: #fff; /* 白色文字 */
            text-align: center;
            padding: 1em;
        }

        section {
            margin: 20px;
        }

        .reviews-container {
            background-color: #dff0d8; /* 淡绿色评价容器背景 */
            padding: 20px;
            border-radius: 10px;
        }

        .review-item {
            margin-bottom: 15px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .complaint-form {
            background-color: #dff0d8; /* 淡绿色投诉表单容器背景 */
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }

        footer {
            background-color: #4caf50; /* 深绿色底部背景 */
            color: #fff; /* 白色文字 */
            text-align: center;
            padding: 1em;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>用户评价与投诉</h1>
    </header>

    <section>
        <div class="reviews-container">
            <div class="review-item" id="container">
                <h2>商品评价</h2>
                <p></p>
            </div>
           <form action="commentsubmission" method="post">
                <label for="complaint">商品评价：</label><br>
                <textarea id="comment" name="comment" rows="4" cols="50"></textarea><br>
                <input type="submit" value="提交评价">
            </form>
        </div>

        <div class="complaint-form">
            <h2>投诉表单</h2>
            <form action="complaintsubmission" method="post">
                <label for="complaint">投诉内容：</label><br>
                <textarea id="complaint" name="complaint" rows="4" cols="50"></textarea><br>
                <input type="submit" value="提交投诉">
            </form>
        </div>
    </section>


        <script src="js/jquery-3.7.1.js"></script>
    
    <script type="text/javascript">
    $.ajax({
        url: "/consumer/commentview",
        type: "GET",
        data: {
            date: new Date().toISOString()
        },
        error: function () {
            console.log("请求失败");
        },
        success: function (data) {
            console.log("请求成功");
            for (var i = 0; i < data.length; i++) {
                var divElement = $('<div>', {
                    class: 'knowledge-item',
                    id: 'html-' + i,
                });
                // 注意这里的属性名是 commentcontent
                divElement.html('<p>' + data[i].comment + '</p>' + '<br><hr/>');
                $('#container').append(divElement);
            }
        }
    });
    </script>
</body>

</html>